<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@page import="cn.com.dhcc.ddi.datasource.vo.TableInfoVo" %>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<%@ include file="/WEB-INF/view/common/css_js_ztree.jsp"%>
<script type="text/javascript" src="${ctx}/static/js/ddi/datasource/datasource.add.js"></script>
<script type="text/javascript">
var isExit=true;
$(function(){
	$('.tipMe').tooltip({'placement':'top'});
	$(window).bind('beforeunload', function() {
		if (isExit) {
			return '您输入的内容尚未保存，确定离开此页面吗？';
		}
	});
});
</script>
<style type="text/css">
.label.arrowed_n_right:after {
    right: -29px;
    border-width: 19px 15px;
}
.lable_n_height{
	height: 38px;
	text-align: center;
	vertical-align: middle;
	padding-top: 12px;
	font-weight: bold;
	width: 181px;
}
.label.arrowed-in:before {
    left: -29px;
    border-width: 19px 15px;
}
.label.arrowed-right {
    margin-right: 22px;
}
.label.arrowed-nn-right:after {
    right: -9.4px;
    border-width: 10px 5px;
}
.chosen-container-single .chosen-search:after {
	display: none;
}
</style>
<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页</li>
						<li>数据源管理</li>
						<li class="active">新增</li>
					</ul>
				</div>
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<div class="widget-toolbar no-border">
										<a class="btn btn-primary btn-xs"
											href="${ctx}/data_source/data_source_list.do"> <i
											class="icon-arrow-left"></i> 返回&nbsp;&nbsp;
										</a>
									</div>
								</div>
							    <div class="widget-body">
									<div class="widget-main">
										<form class="form-horizontal" role="form" id="inputForm"
											action="${ctx}/data_source/add_data_source.do" method="post" onkeydown="if(event.keyCode==13)return false;">
											<input type="text" id="id" name="id" hidden="true">
											<input type="text" id="ctxStr" name="ctxStr" hidden="true" value="${ctx}">
											<div class="text-center" style="margin-top: -2px;">
												<span class="label arrowed-right" id="lable_info" >1.配置数据源基本信息</span>
												<span class="label arrowed-right arrowed-in" id="lable_info_url">2.配置数据源地址&nbsp;&nbsp;&nbsp;&nbsp;</span>
												<span class="label arrowed-in " id="lable_info_data">3.配置数据源数据结构&nbsp;&nbsp;&nbsp;&nbsp;</span>
											</div>
											<br/>
											<span class="label label-primary arrowed-right arrowed-nn-right" id="lable" style="margin-left:12px;margin-top: 1px;">数据源基本信息</span>
											<div class="profile-user-info profile-user-info-striped" style="margin-top: 12px;">
											    <div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top:10px;">数据源名称*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<input type="text" class="col-xs-10 col-sm-5" name="name"
															id="name" title="必填项,数据源名称" placeholder="请输入数据源名称"
															datatype="require|ajax|safeString2" value="${vo.name}" oldValue="${vo.name}"  msg="请输入数据源名称|已经被占用|不允许输入特殊字符"
															require="true" maxlength="200" url="${ctx}/data_source/is_dsName_unique.do"/>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;">所属节点*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<select class="col-xs-10 col-sm-5" name="nodeId"
															id="nodeId" datatype="require" msg="请选择所属节点"
															require="true">
															<option value="">-请选择-</option>
															<c:forEach var="node" items="${nodeList}">
																<option value="${node.id}">${node.name}</option>
															</c:forEach> 
														</select>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;" >数据源类型*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<select class="col-xs-10 col-sm-5" name="type" id="type" onchange="changeDataSourceType(this)">
															<option value="">-请选择数据源类型-</option>
															<option value="1">数据库</option>
															<%-- ${app:ctoption("DS_TYPE","") } --%><!-- 现在只用数据库类型的，其他类型的后期可能会用 -->
														</select>
													</div>
												</div>
												<div class="profile-info-row" style="height: 56px;">
													<div class="profile-info-name" style="padding-top: 10px;" >备注</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<textarea class="col-sm-5" placeholder="请输入备注"
														name="remark" id="remark" title="备注"></textarea>
													</div>
												</div>
												<div id="dbOption" style="display: none;">
													${app:ctoptionExt("DB_TYPE","","","driverName,linkUrl")})
												</div>
											</div>
											
										    <div id="datasourceUrl">
										    </div>
										    <div id="datasourceStruct">
										    </div>
											

											<div class="clearfix form-group mg-top12"  id="sbmDiv" style="display: none">
												<div class="text-center">
													<button type="submit" class="btn btn-sm btn-info" id="sbmBtn"
														onclick="submitBtn()"><i class="icon-ok bigger-110"></i>提交</button>
												</div>
											</div>
							            </form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>